<template>
  <div class="share-nav">
    <el-menu
      :default-active="currentType"
      class="nav-menu"
      @select="handleSelect"
    >
      <el-menu-item index="all">
        <el-icon><Document /></el-icon>
        <span>{{ t('share.nav.all') }}</span>
        <el-tag size="small" class="nav-count" type="info" round>{{ stats?.totalShares || 0 }}</el-tag>
      </el-menu-item>
      <el-menu-item index="active">
        <el-icon><Link /></el-icon>
        <span>{{ t('share.nav.active') }}</span>
        <el-tag size="small" class="nav-count" type="success" round>{{ stats?.activeShares || 0 }}</el-tag>
      </el-menu-item>
      <el-menu-item index="expired">
        <el-icon><Timer /></el-icon>
        <span>{{ t('share.nav.expired') }}</span>
        <el-tag size="small" class="nav-count" type="warning" round>{{ stats?.expiredShares || 0 }}</el-tag>
      </el-menu-item>
      <el-menu-item index="disabled">
        <el-icon><CircleClose /></el-icon>
        <span>{{ t('share.nav.disabled') }}</span>
        <el-tag size="small" class="nav-count" type="danger" round>{{ getDisabledCount() }}</el-tag>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { Document, Link, Timer, CircleClose } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { useShareStore } from '@/stores/shareStore'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const shareStore = useShareStore()
const { currentType, stats } = storeToRefs(shareStore)

const handleSelect = (type: string) => {
  shareStore.updateType(type)
}

// 计算已禁用分享数量
const getDisabledCount = () => {
  if (!stats.value) return 0
  // 已禁用数量 = 总数 - 活跃数 - 过期数
  return Math.max(0, stats.value.totalShares - stats.value.activeShares - stats.value.expiredShares)
}
</script>

<style lang="scss">
@import '@/styles/index.scss';

.share-nav {
  width: 200px;
  background-color: var(--el-bg-color);
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;

  @include respond-to('lg') {
    width: 100%;
  }

  .nav-menu {
    border-right: none;

    @include respond-to('lg') {
      display: flex;
      justify-content: space-between;
    }

    @include respond-to('md') {
      flex-direction: column;
    }
  }

  :deep(.el-menu-item) {
    border-radius: 4px;
    margin: 4px 0;
    height: 40px;

    @include respond-to('lg') {
      flex: 1;
      margin: 0 4px;
      justify-content: center;
    }

    @include respond-to('md') {
      margin: 4px 0;
    }

    .el-icon {
      margin-right: 12px;

      @include respond-to('lg') {
        margin-right: 8px;
      }

      @include respond-to('sm') {
        margin-right: 4px;
      }
    }
  }

  .nav-count {
    position: absolute;
    right: 16px;
    min-width: 24px;
    text-align: center;

    @include respond-to('lg') {
      position: static;
      margin-left: 8px;
    }

    @include respond-to('sm') {
      margin-left: 4px;
      padding: 0 4px;
    }
  }
}
</style> 